<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加减</title>
	<style type="text/css">
		.kg{

			width: 200px;
			height: 50px;
			background-color: #FFB6C1;
			margin: 0 auto;
		}
		.kg_l{

			width:33%;
			height: 100%;
			text-align: center;
			line-height: 40px;
		}
		.kg_z{

			width:34%;
			height: 100%;
			text-align: center;
			line-height: 40px;
			
			margin: 0 0 0 20px;
			/*float: right;*/
		}
		.kg_r{

			width: 33%;
			height: 100%;
			text-align: center;
			line-height: 40px;
			float: right;

		}
		.price{
			
			width: 200px;
			height: 50px;
			background-color: #FFB6C1;
			margin: 0 auto;
			color: red;
			text-align: center;
			line-height: 40px;

		}
	</style>
</head>
<body>
	<div class="kg">
		<button class="kg_l">减</button>
		<span class="kg_z"><span id="num">1</span></span>
		<button class="kg_r">加</button>
	</div>
	<div class="price">$<span id="m">100</span></div>
</body>
</html>
<script type="text/javascript" src="/Public/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var num = $("#num").html();
	var money = $("#m").html();
	$(".kg_l").on("click",function(){
		
		if(num > 1)
		{
			num = num - 1;
			$("#num").html(num);
			var price = money * num;
			$("#m").html(price);
		}

	});

	$(".kg_r").on("click",function(){
		var numb = parseInt(num);
		num = numb + 1;
		$("#num").html(num);
		var price = money * num;
		$("#m").html(price);


	});
});
</script>